<template>
  <a-layout style="min-height: 100vh">
    <a-layout-sider v-model:collapsed="collapsed" >
      <div class="logo" />
      <a-menu theme="dark" v-model:selectedKeys="selectedKeys" mode="inline">
        <a-menu-item key="1">
          <router-link to="/home">
            <pie-chart-outlined />
            <span>仪表盘</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="2">
          <router-link to="/home/dashboard">
            <desktop-outlined />
            <span>分析页</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="3">
          <router-link to="/home/monitor">
            <desktop-outlined />
            <span>监控页</span>
          </router-link>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0" >
        <span @click="toggleCollapsed" class="ant-pro-global-header-trigger">
          <MenuUnfoldOutlined v-if="collapsed" />
          <MenuFoldOutlined v-else />
        </span>

        <a-dropdown placement="bottom" class="ant-pro-global-header-icon">
          <template #overlay>
            <a-menu >
              <a-menu-item key="1">
                <UserOutlined />
                修改密码
              </a-menu-item>
              <a-menu-item key="2" @click="logout">
                <logout-outlined />
                退出
              </a-menu-item>
            </a-menu>
          </template>
          <a-avatar size="large" class="ant-pro-global-header-icon">
            <template #icon><UserOutlined /></template>
          </a-avatar>
        </a-dropdown>

      </a-layout-header>
      <a-layout-content style="margin: 0 10px">
        <a-breadcrumb style="margin: 10px 0">
        </a-breadcrumb>
        <a-card style="width: 100%; height: 95%">
          <router-view/>
        </a-card>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>

import { useRouter } from "vue-router";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PieChartOutlined,
  DesktopOutlined,
  UserOutlined,
  LogoutOutlined,
  ReconciliationOutlined,
  DeploymentUnitOutlined,
  ExperimentOutlined
} from '@ant-design/icons-vue';
import { reactive, defineComponent, ref, toRefs } from 'vue';
import {post} from "../../api/api";
export default defineComponent({
  components: {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    PieChartOutlined,
    DesktopOutlined,
    UserOutlined,
    LogoutOutlined,
    ReconciliationOutlined,
    DeploymentUnitOutlined,
    ExperimentOutlined
  },

  data() {
    return {
      collapsed: ref(false),
      selectedKeys: ref(['1']),
    };
  },

  setup() {
    const userHeader = ref(['header']);
    const state = reactive({
      collapsed: false,
      selectedKeys: ['1'],
      openKeys: ['sub1'],
      preOpenKeys: ['sub1'],
    });

    const toggleCollapsed = () => {
      state.collapsed = !state.collapsed;
      state.openKeys = state.collapsed ? [] : state.preOpenKeys;
    };

    const router = useRouter()

    const logout = () => {
      localStorage.removeItem('X-SEER-AUTH');
      post("/auth/logout").then(() =>{
      });
      router.push('/')
    }

    return {
      userHeader,
      ...toRefs(state),
      toggleCollapsed,
      logout
    };
  }
});
</script>
<style lang="less" scoped>
.logo {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
}

.site-layout .site-layout-background {
  background: #fff;
}
[data-theme='dark'] .site-layout .site-layout-background {
  background: #141414;
}
.ant-pro-global-header-trigger {
  height: 64px;
  line-height: 64px;
  vertical-align: top;
  padding: 0 20px;
  display: inline-block;
  cursor: pointer;
  -webkit-transition: all .3s,padding 0s;
  transition: all .3s,padding 0s;
}
.ant-pro-global-header-icon {
  position: absolute;
  right: 0px;
  margin: 0.6% 3%;
}
</style>